<!--
@license
Copyright 2018 The Tensor2Tensor Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">

<dom-module id="processing-visualization">
  <template>
    <custom-style>
      <style is="custom-style" include="iron-flex iron-flex-alignment">
        .token {
          background-color: #ddd;
          border: 1px #222 solid;
          border-radius: 3px;
          margin: 0px 6px;
          padding: 4px;
        }

        .label {
          font-weight: bold;
          width: 300px;
        }

        .processing-row {
          margin: 12px 0px;
        }

        .processing-cell {
          @apply --layout-horizontal;
        }
      </style>
    </custom-style>
    <h3>Source Processing</h3>
    <!--
      Display the raw source tokens.
    -->
    <template is="dom-repeat" items="[[data.source_processing]]" as="step">
      <div class="processing-row">
        <div class="processing-cell label">
          <span>Step: </span>
          <span>[[step.step_name]]</span>
        </div>
        <div class="processing-cell">
          <template is="dom-repeat" items="[[step.segment]]" as="segment">
            <div class="token">[[segment.text]]</div>
          </template>
        </div>
      </div>
    </template>

    <h3>Target Processing</h3>
    <!--
      Display the target side post processing token sequences for each post
      processing component that reported results.
    -->
    <template is="dom-repeat" items="[[data.target_processing]]" as="step">
      <div class="processing-row">
        <div class="processing-cell label">
          <span>Step: </span>
          <span>[[step.step_name]]</span>
        </div>
        <div class="processing-cell">
          <template is="dom-repeat" items="[[step.segment]]" as="segment">
            <div class="token">[[segment.text]]</div>
          </template>
        </div>
      </div>
    </template>
  </template>
  <script src="processing-visualization.js"></script>
</dom-module>
